Day 06：動嘴寫 Code：用直覺提示詞極速打磨首頁 UI 介面

18th鐵人賽

X_Xuan

團隊nutc imac

2026-09-20 10:24:52

40 瀏覽

分享至

Day 06：動嘴寫 Code：用直覺提示詞極速打磨首頁 UI 介面

嗨，大家今天過得好嗎？歡迎來到鐵人賽 Day 6。

昨天我們成功讓 AI 按照 MVC 架構，吐出了基礎的 SwiftUI 程式碼，而且成功把邏輯跟畫面拆開來了。如果你有實際把 App 跑起來，應該會發現... 嗯，就是一個非常中規中矩的 iOS 內建設定頁面。

原生的 Form 雖然好用，但老實說，拿來當作一個「AI 硬體菜單配對 App」的首頁，實在有點太無聊了。

如果是以前，為了把這個畫面弄得好看一點，我們得開始微調各種 padding、查陰影的 API 怎麼寫、漸層顏色怎麼配，光是切個卡片式排版可能就要耗掉一兩個小時。但現在，這正是 Vibe Coding 最好發揮的戰場！

視覺迭代的鐵則：鎖定目標，禁止越界

這裡有一個非常重要的 Vibe Coding 實戰技巧。

當我們想要請 AI 幫我們「美化畫面」時，千萬不能只跟它說「幫我把這個 App 變漂亮」，然後讓它自己憑空重寫。因為 LLM 很喜歡自作聰明，只要你沒限制它，它常常會連你的 Model 跟 Controller 的邏輯一起「順便」改掉，直接把你昨天建好的 MVC 架構砸爛。

所以，我們的 Prompt 必須明確限制它只能修改 View 的皮，不能動到骨。

給 AI 的 UI 打磨 Prompt

請把昨天產出的 ContentView.swift 複製起來，然後對 AI 下這段指令：

我目前的 SwiftUI 專案已經遵循 MVC 架構， Controller (HomeController) 與 Model (HardwareRequest) 皆已完成，請絕對不要修改邏輯層的任何變數名稱與呼叫方式。

請幫我重新設計以下的 ContentView.swift，讓它更具現代感與科技感。
設計風格與要求：
1. 捨棄原生的 Form，改用 ZStack/VStack 搭配卡片式設計 (Card Design)。
2. 背景使用淺灰色，輸入區塊的卡片使用白色背景搭配柔軟的陰影。
3. TextField 加上稍微圓潤的邊框與適當的內距。
4. 「產生推薦菜單」按鈕請改為具備科技感的藍紫色漸層背景，字體加粗，加上點擊時的縮放動畫。

以下是我目前的 ContentView.swift 程式碼：
(貼上昨天的 ContentView 程式碼)

見證 Vibe Coding 的切版威力

幾秒鐘後，AI 就會給你一份全新的 ContentView.swift。你只需要把 View 裡面的程式碼替換掉，邏輯層完全不用動。

替換後的程式碼大概會長這樣：

import SwiftUI

struct ContentView: View {
    @StateObject private var controller = HomeController()
    
    var body: some View {
        NavigationView {
            ZStack {
                // 淺灰色背景
                Color(.systemGray6).edgesIgnoringSafeArea(.all)
                
                VStack(spacing: 25) {
                    
                    // 卡片區塊
                    VStack(alignment: .leading, spacing: 20) {
                        Text("請輸入您的需求")
                            .font(.headline)
                            .foregroundColor(.gray)
                        
                        // 預算輸入框
                        TextField("輸入預算 (如: 30000)", text: $controller.requestData.budget)
                            .keyboardType(.numberPad)
                            .padding()
                            .background(Color(.systemGray6))
                            .cornerRadius(10)
                        
                        // 用途選擇
                        Picker("選擇用途", selection: $controller.requestData.purpose) {
                            ForEach(controller.purposeOptions, id: \.self) { option in
                                Text(option).tag(option)
                            }
                        }
                        .pickerStyle(SegmentedPickerStyle()) // 換成更有質感的分段選擇器
                    }
                    .padding()
                    .background(Color.white)
                    .cornerRadius(15)
                    .shadow(color: Color.black.opacity(0.05), radius: 10, x: 0, y: 5)
                    
                    Spacer()
                    
                    // 漸層按鈕
                    Button(action: {
                        controller.submitRequest()
                    }) {
                        Text("產生推薦菜單")
                            .font(.headline)
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(
                                LinearGradient(gradient: Gradient(colors: [Color.blue, Color.purple]), startPoint: .leading, endPoint: .trailing)
                            )
                            .cornerRadius(12)
                            .shadow(color: Color.purple.opacity(0.3), radius: 10, x: 0, y: 5)
                    }
                    .padding(.bottom, 20)
                }
                .padding()
            }
            .navigationTitle("AI 硬體配對")
        }
    }
}

把這段貼進 Xcode 跑跑看，你會發現原本陽春的表單，瞬間變成了有陰影、有圓角、有漸層按鈕的現代化 App 介面，而且原本按鈕的 submitRequest() 功能依然完美運作！